<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密钥管理服务</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- 共享响应式样式 -->
    <link href="shared_responsive.css" rel="stylesheet">
    <style>
        /* 移除body上的样式，使用article作为背景层 */
        article {
            background-color: #f8fafc;
            background-image: radial-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px);
            background-size: 20px 20px;
            background-position: 0 0, 10px 10px;
            color: #334155;
            min-height: 100vh;
        }
        .card {
            background-color: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(59, 130, 246, 0.4);
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
            transition: all 0.3s ease;
        }
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
        }
        .btn {
            transition: all 0.3s ease;
        }
        .btn-primary {
            background-color: rgba(59, 130, 246, 0.15);
            color: #3b82f6;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }
        .btn-primary:hover {
            background-color: rgba(59, 130, 246, 0.25);
        }
        .nav-item {
            transition: all 0.3s ease;
        }
        .nav-item:hover {
            background-color: rgba(59, 130, 246, 0.1);
        }
        .stat-card {
            position: relative;
            overflow: hidden;
        }
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
        }
        .pulse-animation {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .stat-icon {
            transition: transform 0.3s ease;
        }
        .stat-card:hover .stat-icon {
            transform: scale(1.1);
        }
        /* 标题样式 */
        h1 {
            font-size: clamp(1.5rem, 3vw, 2rem);
            color: #334155;
        }
        /* 确保100%宽度布局 */
        section {
            width: 100%;
            max-width: 100%;
        }
    </style>
</head>
<body>
    <!-- 背景网格层 -->
    <article>
    <!-- 主要内容层 -->
    <section id="main-content" class="p-6">
        <!-- Toast 容器 -->
        <div id="toast-container" class="fixed top-4 right-4 z-50"></div>
        
        <!-- 页面标题区 -->
        <header class="mb-6 pb-4 border-b border-[rgba(99,116,139,0.2)] fade-in">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                    <h1 class="clamp(1.5rem,3vw,2rem) font-bold text-[#334155]">密钥管理服务</h1>
                    <p class="text-[#64748b] text-sm mt-1">集中管理各类加密密钥，支持密钥的全生命周期管理</p>
                </div>
                <div class="flex gap-3">
                    <a href="clear-data.html" class="btn bg-red-100 text-red-600 hover:bg-red-200 px-4 py-2 rounded-lg inline-flex items-center gap-2 transition-all duration-300 hover:shadow-md">
                        <i class="fas fa-trash"></i>
                        <span>重置数据</span>
                    </a>
                    <a href="../../../index.html" class="btn bg-blue-500 text-white hover:bg-blue-600 px-4 py-2 rounded-lg inline-flex items-center gap-2 transition-all duration-300 hover:shadow-md">
                        <i class="fas fa-arrow-left"></i>
                        <span>返回首页</span>
                    </a>
                </div>
            </div>
        </header>
        
        <!-- 主内容区 -->
        <main>

        <!-- 统计概览 -->
        <section class="mb-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- 统计卡片 1 -->
                <div class="stat-card bg-[rgba(255,255,255,0.9)] rounded-[12px] p-6 shadow-[0_4px_12px_rgba(0,0,0,0.02)] border border-[rgba(59,130,246,0.4)] hover:shadow-[0_6px_16px_rgba(0,0,0,0.04)] transition-all duration-300 flex flex-col transform hover:-translate-y-2 fade-in" style="animation-delay: 0.1s;">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <p class="text-[#64748b] text-sm font-medium">总密钥数</p>
                            <h3 class="text-3xl font-bold mt-1" id="totalKeys">24</h3>
                        </div>
                        <div class="stat-icon bg-[rgba(59,130,246,0.15)] p-3 rounded-lg text-blue-600 transition-transform duration-300">
                            <i class="fas fa-key text-xl"></i>
                        </div>
                    </div>
                    <div class="flex items-center text-sm mt-auto">
                        <span class="text-green-500 flex items-center mr-2">
                            <i class="fas fa-arrow-up mr-1"></i> 12.5%
                        </span>
                        <span class="text-[#64748b]">较上月</span>
                    </div>
                </div>
                <!-- 统计卡片 2 -->
                <div class="stat-card bg-[rgba(255,255,255,0.9)] rounded-[12px] p-6 shadow-[0_4px_12px_rgba(0,0,0,0.02)] border border-[rgba(59,130,246,0.4)] hover:shadow-[0_6px_16px_rgba(0,0,0,0.04)] transition-all duration-300 flex flex-col transform hover:-translate-y-2 fade-in" style="animation-delay: 0.2s;">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <p class="text-[#64748b] text-sm font-medium">密钥模板数</p>
                            <h3 class="text-3xl font-bold mt-1" id="totalTemplates">5</h3>
                        </div>
                        <div class="stat-icon bg-[rgba(34,197,94,0.15)] p-3 rounded-lg text-green-600 transition-transform duration-300">
                            <i class="fas fa-file-alt text-xl"></i>
                        </div>
                    </div>
                    <div class="flex items-center text-sm mt-auto">
                        <span class="text-green-500 flex items-center mr-2">
                            <i class="fas fa-arrow-up mr-1"></i> 8.3%
                        </span>
                        <span class="text-[#64748b]">较上月</span>
                    </div>
                </div>
                
                <!-- 统计卡片 3 -->
                <div class="stat-card bg-[rgba(255,255,255,0.9)] rounded-[12px] p-6 shadow-[0_4px_12px_rgba(0,0,0,0.02)] border border-[rgba(59,130,246,0.4)] hover:shadow-[0_6px_16px_rgba(0,0,0,0.04)] transition-all duration-300 flex flex-col transform hover:-translate-y-2 fade-in" style="animation-delay: 0.3s;">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <p class="text-[#64748b] text-sm font-medium">待审核请求</p>
                            <h3 class="text-3xl font-bold mt-1" id="pendingRequests">13</h3>
                        </div>
                        <div class="stat-icon bg-[rgba(245,158,11,0.15)] p-3 rounded-lg text-yellow-600 transition-transform duration-300">
                            <i class="fas fa-clock text-xl"></i>
                        </div>
                    </div>
                    <div class="flex items-center text-sm mt-auto">
                        <span class="text-yellow-500 flex items-center mr-2">
                            <i class="fas fa-exclamation-circle mr-1"></i> 需要处理
                        </span>
                    </div>
                </div>
                
                <!-- 统计卡片 4 -->
                <div class="stat-card bg-[rgba(255,255,255,0.9)] rounded-[12px] p-6 shadow-[0_4px_12px_rgba(0,0,0,0.02)] border border-[rgba(59,130,246,0.4)] hover:shadow-[0_6px_16px_rgba(0,0,0,0.04)] transition-all duration-300 flex flex-col transform hover:-translate-y-2 fade-in" style="animation-delay: 0.4s;">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <p class="text-[#64748b] text-sm font-medium">活跃密钥</p>
                            <h3 class="text-3xl font-bold mt-1" id="activeKeys">5</h3>
                        </div>
                        <div class="stat-icon bg-[rgba(139,92,246,0.15)] p-3 rounded-lg text-purple-600 transition-transform duration-300">
                            <i class="fas fa-bolt text-xl"></i>
                        </div>
                    </div>
                    <div class="flex items-center text-sm mt-auto">
                        <span class="text-green-500 flex items-center mr-2">
                            <i class="fas fa-arrow-up mr-1"></i> 5.2%
                        </span>
                        <span class="text-[#64748b]">较上月</span>
                    </div>
                </div>
        </div>

        <!-- 功能模块导航 -->
        <section class="mb-8">
            <h2 class="text-xl font-bold mb-6 text-[#334155]">密钥管理功能</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <a href="keys.html" class="card p-6 hover:shadow-[0_6px_16px_rgba(0,0,0,0.04)] transition-all duration-300 border border-[rgba(59,130,246,0.4)] rounded-[12px] bg-[rgba(255,255,255,0.9)] transform hover:-translate-y-2 fade-in" style="animation-delay: 0.5s;">
                <div class="flex items-start gap-4">
                    <div class="w-12 h-12 rounded-lg bg-[rgba(59,130,246,0.15)] flex items-center justify-center flex-shrink-0 stat-icon">
                        <i class="fas fa-key text-blue-600 text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-lg font-semibold mb-2 text-[#334155]">密钥管理</h3>
                        <p class="text-[#64748b] mb-4 text-balance">管理各类加密密钥，支持SM2、RSA、SM4、AES等算法</p>
                        <div class="flex items-center text-blue-600 hover:text-blue-700 transition-colors duration-300">
                            <span class="mr-2">进入管理</span>
                            <i class="fas fa-arrow-right transition-transform duration-300 hover:translate-x-1"></i>
                        </div>
                    </div>
                </div>
            </a>
            
            <a href="templates.html" class="card p-6 hover:shadow-[0_6px_16px_rgba(0,0,0,0.04)] transition-all duration-300 border border-[rgba(59,130,246,0.4)] rounded-[12px] bg-[rgba(255,255,255,0.9)] transform hover:-translate-y-2 fade-in" style="animation-delay: 0.6s;">
                <div class="flex items-start gap-4">
                    <div class="w-12 h-12 rounded-lg bg-[rgba(34,197,94,0.15)] flex items-center justify-center flex-shrink-0 stat-icon">
                        <i class="fas fa-file-alt text-green-600 text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-lg font-semibold mb-2 text-[#334155]">密钥模板</h3>
                        <p class="text-[#64748b] mb-4 text-balance">创建和管理密钥模板，配置密钥生成规则</p>
                        <div class="flex items-center text-green-600 hover:text-green-700 transition-colors duration-300">
                            <span class="mr-2">进入管理</span>
                            <i class="fas fa-arrow-right transition-transform duration-300 hover:translate-x-1"></i>
                        </div>
                    </div>
                </div>
            </a>
            
            <a href="distribution.html" class="card p-6 hover:shadow-[0_6px_16px_rgba(0,0,0,0.04)] transition-all duration-300 border border-[rgba(59,130,246,0.4)] rounded-[12px] bg-[rgba(255,255,255,0.9)] transform hover:-translate-y-2 fade-in" style="animation-delay: 0.7s;">
                <div class="flex items-start gap-4">
                    <div class="w-12 h-12 rounded-lg bg-[rgba(245,158,11,0.15)] flex items-center justify-center flex-shrink-0 stat-icon">
                        <i class="fas fa-exchange-alt text-yellow-600 text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-lg font-semibold mb-2 text-[#334155]">密钥发行</h3>
                        <p class="text-[#64748b] mb-4 text-balance">管理密钥发行流程，支持上下级平台密钥申请</p>
                        <div class="flex items-center text-yellow-600 hover:text-yellow-700 transition-colors duration-300">
                            <span class="mr-2">进入管理</span>
                            <i class="fas fa-arrow-right transition-transform duration-300 hover:translate-x-1"></i>
                        </div>
                    </div>
                </div>
            </a>
            
            <a href="backup.html" class="card p-6 hover:shadow-[0_6px_16px_rgba(0,0,0,0.04)] transition-all duration-300 border border-[rgba(59,130,246,0.4)] rounded-[12px] bg-[rgba(255,255,255,0.9)] transform hover:-translate-y-2 fade-in" style="animation-delay: 0.8s;">
                <div class="flex items-start gap-4">
                    <div class="w-12 h-12 rounded-lg bg-[rgba(59,130,246,0.15)] flex items-center justify-center flex-shrink-0 stat-icon">
                        <i class="fas fa-database text-blue-600 text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-lg font-semibold mb-2 text-[#334155]">备份恢复</h3>
                        <p class="text-[#64748b] mb-4 text-balance">管理密钥数据的备份与恢复，确保数据安全</p>
                        <div class="flex items-center text-blue-600 hover:text-blue-700 transition-colors duration-300">
                            <span class="mr-2">进入管理</span>
                            <i class="fas fa-arrow-right transition-transform duration-300 hover:translate-x-1"></i>
                        </div>
                    </div>
                </div>
            </a>
            
            <a href="forensics.html" class="card p-6 hover:shadow-[0_6px_16px_rgba(0,0,0,0.04)] transition-all duration-300 border border-[rgba(59,130,246,0.4)] rounded-[12px] bg-[rgba(255,255,255,0.9)] transform hover:-translate-y-2 fade-in" style="animation-delay: 0.9s;">
                <div class="flex items-start gap-4">
                    <div class="w-12 h-12 rounded-lg bg-[rgba(124,58,237,0.15)] flex items-center justify-center flex-shrink-0 stat-icon">
                        <i class="fas fa-gavel text-purple-600 text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-lg font-semibold mb-2 text-[#334155]">司法取证</h3>
                        <p class="text-[#64748b] mb-4 text-balance">提供密钥数据司法取证功能，支持法律合规需求</p>
                        <div class="flex items-center text-purple-600 hover:text-purple-700 transition-colors duration-300">
                            <span class="mr-2">进入管理</span>
                            <i class="fas fa-arrow-right transition-transform duration-300 hover:translate-x-1"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <script src="../common/common.js"></script>
    <script type="module">
        // 初始化脚本
        function initApp() {
            // 动态计算高度
            const updateHeight = function() {
                const section = document.getElementById('main-content');
                if (section) {
                    try {
                        const windowHeight = window.innerHeight;
                        section.style.minHeight = (windowHeight - 40) + 'px';
                    } catch (error) {
                        console.error('高度计算失败:', error);
                        section.style.minHeight = '600px'; // 降级方案
                    }
                }
            };
            
            // 初始化时计算高度
            updateHeight();
            
            // 窗口大小改变时重新计算
            window.addEventListener('resize', updateHeight);
        }
        
        // 初始化数据
        initApp();
        
        // 原有初始化代码
        function init() {
            showLoading();
            
            // 初始化密钥数据
            if (!localStorage.getItem('keys')) {
                const initialKeys = [
                    { id: 'KMS-001', name: '主密钥A', type: 'KEK', algorithm: 'SM2', length: 256, validFrom: '2024-01-01', validTo: '2025-01-01', status: 'active', description: '用于加密其他密钥的主密钥' },
                    { id: 'KMS-002', name: '数据加密密钥', type: 'DEK', algorithm: 'SM4', length: 128, validFrom: '2024-01-01', validTo: '2024-06-01', status: 'active', description: '用于数据加密的会话密钥' },
                    { id: 'KMS-003', name: '签名密钥', type: '签名密钥', algorithm: 'SM2', length: 256, validFrom: '2024-01-01', validTo: '2025-01-01', status: 'active', description: '用于数字签名的密钥对' },
                    { id: 'KMS-004', name: '备份密钥', type: 'KEK', algorithm: 'SM2', length: 256, validFrom: '2024-01-01', validTo: '2025-01-01', status: 'active', description: '用于加密备份数据的密钥' },
                    { id: 'KMS-005', name: '测试密钥', type: 'DEK', algorithm: 'AES', length: 128, validFrom: '2024-01-01', validTo: '2024-03-01', status: 'inactive', description: '用于测试的临时密钥' }
                ];
                localStorage.setItem('keys', JSON.stringify(initialKeys));
            }
            
            // 初始化模板数据
            if (!localStorage.getItem('templates')) {
                const initialTemplates = [
                    { id: 'TMP-001', name: '标准SM2模板', algorithm: 'SM2', defaultLength: 256, purpose: '数字签名和加密', status: 'active', policies: { requireApproval: true, autoRotate: true, enableBackup: true } },
                    { id: 'TMP-002', name: '通用AES模板', algorithm: 'AES', defaultLength: 128, purpose: '数据加密', status: 'active', policies: { requireApproval: false, autoRotate: false, enableBackup: true } },
                    { id: 'TMP-003', name: '高强度RSA模板', algorithm: 'RSA', defaultLength: 2048, purpose: '身份认证', status: 'active', policies: { requireApproval: true, autoRotate: true, enableBackup: true } },
                    { id: 'TMP-004', name: '国密SM4模板', algorithm: 'SM4', defaultLength: 128, purpose: '数据加密', status: 'active', policies: { requireApproval: true, autoRotate: false, enableBackup: true } },
                    { id: 'TMP-005', name: '测试模板', algorithm: 'SM2', defaultLength: 256, purpose: '测试使用', status: 'inactive', policies: { requireApproval: false, autoRotate: false, enableBackup: false } }
                ];
                localStorage.setItem('templates', JSON.stringify(initialTemplates));
            }
            
            // 初始化密钥申请数据
            if (!localStorage.getItem('keyRequests')) {
                const initialRequests = [
                    { id: 'REQ-001', applicant: '下级平台A', time: '2024-01-15 10:30', keyType: 'KEK', algorithm: 'AES', status: 'pending', details: '申请128位AES密钥用于数据加密' },
                    { id: 'REQ-002', applicant: '下级平台B', time: '2024-01-16 14:20', keyType: 'DEK', algorithm: 'SM4', status: 'approved', details: '申请256位SM4密钥用于文件加密' },
                    { id: 'REQ-003', applicant: '下级平台C', time: '2024-01-17 09:15', keyType: '主密钥', algorithm: 'SM2', status: 'rejected', details: '申请256位SM2主密钥' },
                    { id: 'REQ-004', applicant: '下级平台D', time: '2024-01-18 16:45', keyType: 'DEK', algorithm: 'AES', status: 'pending', details: '申请192位AES密钥用于数据库加密' },
                    { id: 'REQ-005', applicant: '下级平台E', time: '2024-01-19 11:20', keyType: '签名密钥', algorithm: 'SM2', status: 'pending', details: '申请SM2签名密钥用于文档签署' }
                ];
                localStorage.setItem('keyRequests', JSON.stringify(initialRequests));
            }
            
            // 初始化密钥发行记录
            if (!localStorage.getItem('keyDistributions')) {
                const initialDistributions = [
                    { id: 'DIS-001', keyId: 'KMS-004', receiver: '下级平台B', time: '2024-01-16 15:00', validity: '365天', status: 'completed', file: 'kms-distribution-20240116.zip' },
                    { id: 'DIS-002', keyId: 'KMS-005', receiver: '下级平台D', time: '2024-01-14 11:30', validity: '365天', status: 'completed', file: 'kms-distribution-20240114.zip' },
                    { id: 'DIS-003', keyId: 'KMS-006', receiver: '下级平台E', time: '2024-01-13 16:45', validity: '365天', status: 'completed', file: 'kms-distribution-20240113.zip' },
                    { id: 'DIS-004', keyId: 'KMS-007', receiver: '下级平台F', time: '2024-01-12 10:15', validity: '365天', status: 'completed', file: 'kms-distribution-20240112.zip' },
                    { id: 'DIS-005', keyId: 'KMS-008', receiver: '下级平台G', time: '2024-01-11 14:30', validity: '365天', status: 'completed', file: 'kms-distribution-20240111.zip' }
                ];
                localStorage.setItem('keyDistributions', JSON.stringify(initialDistributions));
            }
            
            // 初始化发行配置
            if (!localStorage.getItem('distributionConfig')) {
                const initialConfig = {
                    mode: 'online',
                    approvalFlow: 'single',
                    keyValidity: 365,
                    defaultAlgorithm: 'SM2'
                };
                localStorage.setItem('distributionConfig', JSON.stringify(initialConfig));
            }
            
            // 初始化备份历史
            if (!localStorage.getItem('backupHistory')) {
                const initialBackupHistory = [
                    { id: 'BACK-001', name: '2024-01-15 系统备份', date: '2024-01-15 18:00', type: '全量', size: '12.5 MB', status: 'success' },
                    { id: 'BACK-002', name: '2024-01-14 增量备份', date: '2024-01-14 18:00', type: '增量', size: '3.2 MB', status: 'success' },
                    { id: 'BACK-003', name: '2024-01-13 全量备份', date: '2024-01-13 18:00', type: '全量', size: '12.1 MB', status: 'success' }
                ];
                localStorage.setItem('backupHistory', JSON.stringify(initialBackupHistory));
            }
            
            // 初始化取证人员数据
            if (!localStorage.getItem('forensicPersonnel')) {
                const initialPersonnel = [
                    { id: 'FP-001', name: '张三', idCard: '110101199001011234', certificate: '公证员证-001', status: 'active' },
                    { id: 'FP-002', name: '李四', idCard: '110101199001011235', certificate: '公证员证-002', status: 'active' },
                    { id: 'FP-003', name: '王五', idCard: '110101199001011236', certificate: '公证员证-003', status: 'inactive' }
                ];
                localStorage.setItem('forensicPersonnel', JSON.stringify(initialPersonnel));
            }
            
            // 初始化取证日志
            if (!localStorage.getItem('forensicLogs')) {
                const initialLogs = [
                    { id: 'LOG-001', personnel: '张三', time: '2024-01-15 10:30', action: '密钥导出', keyId: 'KMS-001', status: 'success' },
                    { id: 'LOG-002', personnel: '李四', time: '2024-01-14 14:20', action: '密钥验证', keyId: 'KMS-002', status: 'success' },
                    { id: 'LOG-003', personnel: '张三', time: '2024-01-13 09:15', action: '密钥备份', keyId: '全部', status: 'success' }
                ];
                localStorage.setItem('forensicLogs', JSON.stringify(initialLogs));
            }
            
            setTimeout(() => {
                hideLoading();
                updateStatistics();
            }, 500);
        }

        // 更新统计信息
        function updateStatistics() {
            const keys = JSON.parse(localStorage.getItem('keys') || '[]');
            const templates = JSON.parse(localStorage.getItem('templates') || '[]');
            const keyRequests = JSON.parse(localStorage.getItem('keyRequests') || '[]');
            
            // 带动画效果的数字更新
            animateNumber('totalKeys', keys.length);
            animateNumber('totalTemplates', templates.length);
            animateNumber('pendingRequests', keyRequests.filter(req => req.status === 'pending').length);
            animateNumber('activeKeys', keys.filter(key => key.status === 'active').length);
        }

        // 数字动画效果使用common.js中的函数
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 延迟加载以展示动画效果
            setTimeout(() => {
                init();
            }, 100);
        });


        
        // 设置页面可见性变化事件，当页面重新可见时更新统计
        document.addEventListener('visibilitychange', () => {
            if (!document.hidden) {
                updateStatistics();
            }
        });
    </script>
</body>
</html>